<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>微博签到图</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="elasticsearch,echarts,geojson,shapefile,language"
    src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    #mapid {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="mapid"></div>
  <div id="mouse-position">
  </div>
  <script>
    var mousePosition = document.getElementById('mouse-position')

    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken =
      'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var myChart = echarts.init(document.getElementById('mapid'), null, {
      devicePixelRatio: 1
    });
    myChart.showLoading();
    $.getJSON('../../static/data/echartsgl/weibo/data.json', function (weiboData) {
      myChart.hideLoading();
      weiboData = weiboData.map(function (serieData, idx) {
        var px = serieData[0] / 1000;
        var py = serieData[1] / 1000;
        var res = [
          [px, py, 1]
        ];

        for (var i = 2; i < serieData.length; i += 2) {
          var dx = serieData[i] / 1000;
          var dy = serieData[i + 1] / 1000;
          var x = px + dx;
          var y = py + dy;
          res.push([x.toFixed(2), y.toFixed(2), 1]);

          px = x;
          py = y;
        }
        return res;
      });

      myChart.setOption({
        mapbox: {
          center: [104.114129, 37.550339],
          zoom: 3,
          pitch: 10,
          bearing: 0,
          style: 'mapbox://styles/mapbox/dark-v9',
          postEffect: {
            enable: true
          },
          light: {
            main: {
              intensity: 2,
              shadow: false,
              shadowQuality: 'high'
            },
            ambient: {
              intensity: 0.
            }
          }
        },
        series: [{
          name: '弱',
          type: 'scatter3D',
          coordinateSystem: 'mapbox',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(37, 140, 249, 0.8)',
            color: 'rgba(37, 140, 249, 0.8)'
          },
          data: weiboData[0]
        }, {
          name: '中',
          type: 'scatter3D',
          coordinateSystem: 'mapbox',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(14, 241, 242, 0.8)',
            color: 'rgba(14, 241, 242, 0.8)'
          },
          data: weiboData[1]
        }, {
          name: '强',
          type: 'scatter3D',
          coordinateSystem: 'mapbox',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(255, 255, 255, 0.8)',
            color: 'rgba(255, 255, 255, 0.8)'
          },
          data: weiboData[2]
        }]

      });
      var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
      mapbox.addControl(new MapboxLanguage(), 'top-right'); //中文支持
      //注册鼠标移动事件
      mapbox.on('mousemove', function (e) {
        //经纬度坐标转web墨卡托
        const earthRad = 6378137.0;
        const x = e.lngLat.lng * Math.PI / 180 * earthRad;
        const a = e.lngLat.lat * Math.PI / 180;
        const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        mousePosition.innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
      });
    });
    window.addEventListener('keydown', function () {
      myChart.dispatchAction({
        type: 'lines3DToggleEffect',
        seriesIndex: 0
      });
    });
  </script>
</body>

</html>